<!--
  Generated template for the NailShopPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <!-- <ion-navbar>
    <ion-title>nailShop</ion-title>
  </ion-navbar> -->
  <div *ngFor="let detail of shopInfo">
    <div class="shopDetail">
      <div class="wrap">
      </div>
      <div class="bgImg">
          <img src="assets/img/nailShopBg.jpg" alt="">
      </div>
      <button ion-button icon-only (click)="dismiss()" style="position: absolute;top: 10px;
              left: 15px;
              width: 30px;
              height: 30px;
              border-radius: 45px;
              opacity: 0.6;
              z-index:300">
        <ion-icon name="arrow-back"  color="#ffffff" style=" font-size: 26px;" ></ion-icon>
      </button>
      <div class="shop">
        <div class="shopPic">
          <img src="{{picture}}{{detail.shop_logo}}" alt="">
        </div>
        <div class="shopName">
          <h3>{{detail.shop_name}}</h3>
          <h4>店铺ID : {{getShopNailListAPIVo.shop_id}}</h4>
        </div>
        <!-- <div class="shopStar">
          <ul class="clearfix">
            <li *ngFor='let yero of Mdstar'>
              <ion-icon ios="ios-star" md="md-star"></ion-icon>
            </li>
            <li *ngFor='let gary of Gray'>
             <ion-icon ios="ios-star" md="md-star" style="color: rgb(255,255,255)"></ion-icon>
            </li>
          </ul>
        </div> -->
      </div>
      <div class="shopOperate">
        <div class="fans">
          <p> {{detail.fans_count}} 粉丝</p>
        </div>
        <div class="concern">
          <button class="concernBtn" (click)="unsetAttention(getShopNailListAPIVo.shop_id)" *ngIf="detail.is_focus==0?true:false">关注</button>
          <button class="unConcernBtn" (click)="unsetAttention(getShopNailListAPIVo.shop_id)" *ngIf="detail.is_focus==1?true:false">已关注</button>
        </div>
      </div>
    </div>
    <div class="shopAddress clearfix">
      <div class="addressPhone">
        <ion-icon name="ios-pin-outline" style="position:relative;"></ion-icon>
        <p style="display:inline-block">{{detail.shop_address}}</p>
      </div>
      <div class="call">
        <a href="tel:{{detail.shop_tel}}" >
          <img src="assets/img/call.png" alt=""></a>
          <span>{{detail.shop_tel}}</span>
      </div>
    </div>
    <div class="tab">
      <ion-segment style="padding-top: 1px;height: 100%;">
        <ion-segment-button (ionSelect)="selectFunc('ShopShowPage')" [ngClass]="{'shopShow':isShopShow}">
          <p style="margin-top: -10px;">{{detail.shop_num}}</p>
          <p style="margin-top: -27px;">店铺秀</p>
        </ion-segment-button>
        <ion-segment-button (ionSelect)="selectFunc('NailTeacherPage')" [ngClass]="{'shopShow':isNailTeach}">
          <p style="margin-top: -10px;">{{detail.nail_num}}</p>
          <p style="margin-top: -27px;"> 美甲师</p>
        </ion-segment-button>
      </ion-segment>
    </div>
  </div>
</ion-header>

<!--店铺秀  -->
<ion-content padding #container has-header style="margin:0">
  <div class="shopShow" *ngIf="isShopShow&&!teachUndata" style="margin-top: 335px;">
    <ul style="display: flex;flex-wrap: wrap;list-style:none;padding: 0px;margin: 0px;background-color: #f0f2f5;">
      <li style="width: 50%;" *ngFor="let shop of showShopList" (click)="toShopInfo(shop.service_id)">
        <ion-card id="reconmend_list" style="border-radius: 5px;">
          <!-- <img src="http://www.mengfeisi.com.cn/Uploads/nail_album/2017-03-07/1_328.jpg" style="width:100%;height:100%"> -->
          <div style="width:100%;height:10rem;">
            <img src="{{picture}}{{shop.imgs}}" style="width:100%;height:100%">
          </div>
          <div class="text2">
            <p class="clearfix">
              <span style="float:left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 50%;">{{shop.service_name }}</span>
              <span style="float:right;color:red">￥{{shop.service_price}}</span>
            </p>
          </div>
        </ion-card>
      </li>
    </ul>
  </div>

  <!--美甲师  -->
  <div class="nailTeach" *ngIf="isNailTeach&&!nailUndata" style="margin-top:28.1rem;">
    <ion-list style="margin-bottom:1rem;" *ngFor="let nail of showNailList;let i=index">
      <ion-item>
        <ion-avatar item-start>
          <!-- <img src="{{picture}}www.mengfeisi.com.cn/Uploads/nail_album/2017-03-07/1_328.jpg"> -->
          <img src="{{picture}}{{nail.artist_avator}}">
        </ion-avatar>
        <div (tap)="gotoNailDetail(nail)">
          <h2>{{nail.artist_name}}</h2>
          <p>{{nail.nails_count}}款美图 | {{nail.focused_count}}粉丝</p>
        </div>
        <!-- <button ion-button clear item-end>关注</button> -->
        <button ion-button clear item-end (tap)="unsetAttention(nail.artist_id)" *ngIf="nail.is_focus==0?true:false">关注</button>
        <button ion-button color="light" item-end style="border-style:none;" (tap)="unsetAttention(nail.artist_id)" *ngIf="nail.is_focus==1?true:false">已关注</button>
      </ion-item>
      <div style="background-color:#fff; padding: 20px 0;" padding>
        <ul class="clearfix" style="margin: 0;margin-left:-1%; padding:0  4%;">
          <li style=" list-style:none;float:left;width:33.3%;padding-left:2%;" *ngFor="let nailImg of nail.nails">
             <img src="{{picture}}{{nailImg.nail_album}}"> 
            
          </li>
        </ul>
         <p class="noPic" *ngIf="showShopList.length==0">暂无美甲师信息</p>
      </div>
    </ion-list>
  </div>

  <!--美甲师&&美甲店铺空数据提醒  -->
  <div text-center *ngIf="isNailTeach&&nailUndata" style="margin-top: 350px;">
    <h2 style="margin-top:50px;">暂无美甲师信息</h2>
  </div>
  <div text-center *ngIf="isNailTeach&&teachUndata" style="margin-top: 350px;">
    <h2 style="margin-top:50px;">暂无美甲商品信息</h2>
  </div>
</ion-content>